<template>
  <div class="container">
    <!-- 标题 -->
    <van-nav-bar title="标题" left-arrow>
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <!--  -->
    <div class="lunbo">
      <div class="yjq_biaoti_container">
        <div class="yjq_one">
          <span>{{ search.title }}</span>
          <van-icon name="star-o" size="20" class="icon"></van-icon>
        </div>
        <div class="mianfei">免费</div>
        <div class="kes">
          共{{ search.total_periods }}课时 | {{ search.sales_num }}人已报名
        </div>
        <div class="time">
          开课时间: {{ search.start_play_date | filtersatart }}-
          {{ search.end_play_date | filterend }}
        </div>
      </div>
      <div class="yjq_jxtd_container">
          <div class="jxtd">
              教学团队
           <div class="yjq_xinxi">
            <img :src="teachers[0].teacher_avatar" alt="" />
            <div>{{ teachers[0].teacher_name }}</div>
          </div>
          </div>
      </div>
      <!-- jie -->
      <div class="kejs">
          课程介绍
      </div>
    </div>
  </div>
</template>
<script>
import { seacha , outline } from "../../../../request/http";
export default {
  data() {
    return {
      search: [],
      teachers:[],
      dagang:[],
    };
  },
  mounted() {
    // console.log(;
    seacha(this.$route.query.id).then((res) => {
    //   console.log(res);
      //   console.log();
      this.search = res.info;
      this.teachers=res.teachers
    });
     outline (this.$route.query.id).then(res=>{
        console.log(res);
    })
  },
  filters: {
    //开始时间
    filtersatart(val) {
      var date = new Date(val * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate(); //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getUTCHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + "" + getTimerr();
    },
    //结束时间
    filterend(vals) {
      var date = new Date(vals * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate() + 5; //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getUTCHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + "" + getTimerr();
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
}
.lunbo {
  width: 100%;
  height: 560px;
  background-color: #f0f2f5;
  overflow: scroll;
  .yjq_biaoti_container {
    width: 100%;
    height: 160px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px 10px;
    margin-bottom: 20px;
    .yjq_one {
      width: 100%;

      font-size: 18px;
      .icon {
        margin-left: 220px;
      }
    }
    .mianfei {
      font-size: 18px;
      color: orange;
      margin: 5px 0;
    }
    .kes {
      font-size: 15px;
      color: gray;
      margin: 10px 0;
    }
    .time {
      font-size: 15px;
      color: gray;
      margin: 10px 0;
    }
  }
  .yjq_jxtd_container{
      width: 100%;
      height: 140px;
      background-color: white;
        box-sizing: border-box;
    padding: 10px 10px;
    margin-bottom: 20px;
    .jxtd{
        font-size: 18px;
    }
    .yjq_xinxi {
    width: 100%;
    margin: 10px 20px;
    
 
    img {
      width: 30px;
      height: 30px;
      border-radius: 50px;
      margin-right: 10px;
    }
    div {
      font-size: 14px;
      color: gray;
    }
  }
  }
  .kejs{
      width: 100%;
      height: 80px;
      background-color: white;
      box-sizing: border-box;
      padding: 10px;
      font-size: 18px;
  }
}
</style>